<template>
  <view class="order-detail-layout">
    <my-header background-color="url('https://www.dingxians.cn/images/common/bg-header.png')">
      <view class="header">
        <view class="status">{{ orderData.status_str }}</view>
        <!--  <view class="time" v-if="orderData.status == 1">支付剩余时间：{{ minute_str }}:{{ second_str }}</view> -->
        <view class="time" v-if="orderData.status == 1">
          支付剩余时间：
          <text class="expired">{{ minute_str }}:{{ second_str }}</text>
        </view>
      </view>
    </my-header>
    <my-content class="content" v-if="resultStatus" :default-padding-top="orderData.status == 1 ? 75 : 45">
      <!-- <image v-if="orderData.status == 5 || orderData.status == 5" mode="widthFix" class="content_bg" src="http://www.qixdian.cn/upload/20230909/64fc482a828c2.png"></image>
		<image v-if="orderData.status != 5 && orderData.status != 5" mode="widthFix" class="content_bg" src="http://www.qixdian.cn/upload/20230909/64fc4b6570296.png"></image>
	 -->
      <!-- <view class="header">
			<view class="status">
				<view>{{ orderData.status_str }}</view>
			</view>
			<view v-if="orderData.status == 1" class="expired_at">
				<view>支付剩余时间： </view>
				<view class="time">{{minute_str}}:{{second_str}}</view>
			</view>
		</view> -->
      <view class="address">
        <image src="https://www.dingxians.cn/images/common/location.png" class="address_icon"></image>
        <view class="address_info">
          <view class="address_user">
            <view class="username">{{ orderData.order_username }}</view>
            <view class="mobile">{{ orderData.order_mobile }}</view>
          </view>
          <view class="address_detail">{{ orderData.order_address }}</view>
        </view>
        <!-- <image style="width: 22rpx;
        height: 22rpx; margin-right: 20rpx;" src="https://www.dingxians.cn/images/common/arrow-right.png"></image> -->
      </view>

      <view class="goods_box">
        <view class="goods_header">
          <!-- <view class="goods_header_dot"></view> -->
          <view class="goods_header_title">商品信息</view>
        </view>
        <view class="goods_content">
          <view class="goods_info" v-for="item in orderData.order_detail" :key="item.id">
            <view class="goods-image-bg">
              <image mode="widthFix" class="goods_image" :src="item.goods_image"></image>
            </view>
            <view class="goods_item">
              <view class="goods_name">{{ item.goods_name }}</view>
              <view class="goods_attr" v-if="item.attr_values">
                <text class="goods_attr_value">{{ item.attr_values }}</text>
              </view>
              <view class="goods_price_num">
                <view class="goods_price">
                  <view class="goods_price_icon">￥</view>
                  <view>{{ item.goods_price }}</view>
                </view>
                <view class="goods_num">x {{ item.num }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="order_item">
          <view class="order_label">商品总价</view>
          <view class="order_text">
            <view class="price_icon">￥</view>
            <view class="price_int">{{ orderData.total_amount }}</view>
          </view>
        </view>
        <view class="order_item">
          <view class="order_label">运费</view>
          <view class="order_text">
            <view class="price_icon">￥</view>
            <view class="price_int">{{ orderData.freight_amount }}</view>
          </view>
        </view>
        <view class="order_item">
          <view class="order_label">包邮券</view>
          <view class="order_text" v-if="orderData.is_freight">
            <view class="price_icon">-￥</view>
            <view class="price_int">{{ orderData.freight_amount }}</view>
          </view>
          <view class="order_text" v-else>无</view>
        </view>
        <view class="order_item">
          <view class="order_label">实付款</view>
          <view class="order_text">
            <view class="price_icon">￥</view>
            <view class="price_int">{{ orderData.pay_amount }}</view>
          </view>
        </view>
      </view>

      <view class="order_box">
        <view class="order_header">
          <!-- <view class="order_header_dot"></view> -->
          <view class="order_header_title">订单信息</view>
        </view>
        <view class="order_item">
          <view class="order_label">订单编号</view>
          <view class="order_text">{{ orderData.order_no }}</view>
        </view>
        <view class="order_item">
          <view class="order_label">创建时间</view>
          <view class="order_text">{{ orderData.created_at }}</view>
        </view>
        <view class="order_item">
          <view class="order_label">支付方式</view>
          <view class="order_text">{{ orderData.pay_type_str }}</view>
        </view>
        <view class="order_item">
          <view class="order_label">订单类型</view>
          <view class="order_text">{{ orderData.type_str }}</view>
        </view>
        <view class="order_item">
          <view class="order_label">备注信息</view>
          <view class="order_text" v-if="orderData.remark">{{ orderData.remark }}</view>
          <view class="order_text" v-else>无</view>
        </view>
      </view>

      <view class="bottom">
        <view class="bottom_text">
          <view class="bottom_text_num">
            共
            <text style="color: #ded000">{{ orderData.num }}</text>
            件
          </view>

          <view class="bottom_text_amount">
            <view class="amount_icon">合计：</view>
            <view class="amount_int">{{ orderData.pay_amount }}</view>
          </view>
        </view>
        <view class="exchange_btn cancel" @click="del(orderData.id)" v-if="orderData.action.del_btn">删除订单</view>
        <view class="exchange_btn cancel" @click="cancel(orderData.id)" v-if="orderData.action.cancel_btn">
          取消订单
        </view>
        <view class="exchange_btn pay" @click="pay(orderData)" v-if="orderData.action.pay_btn && !payed">立即支付</view>
        <view class="exchange_btn pay" v-if="orderData.action.pay_btn && payed">立即支付</view>
        <view class="exchange_btn pay" @click="receive(orderData.id)" v-if="orderData.action.receive_btn">
          确认收货
        </view>
        <!-- <view style="visibility: hidden; margin-left: 10rpx">1</view> -->
      </view>

    </my-content>
    <my-alert-dialog
      ref="alertDialog"
      title="提示"
      content="确定取消订单吗？"
      cancelString="暂不"
      @confirm="handleConfirm"
    ></my-alert-dialog>

    <my-alert-dialog ref="delDialog" title="提示" content="确定要删除订单嘛?" @confirm="handelDelOrder"></my-alert-dialog>
    <my-alert-dialog ref="receiveDialog" title="提示" content="确定收货嘛？" @confirm="handleReceiveDialog"></my-alert-dialog>
  </view>
</template>

<script>
import api from '../../api/index.js'

export default {
  data() {
    return {
      orderData: {
        order_detail: [],
        action: {},
      },
      order_id: '',
      resultStatus: false,
      minute: '',
      second: '',
      minute_str: '',
      second_str: '',
      payed: false, //是否处于支付中防止连续点击
    }
  },
  onLoad(option) {
    this.order_id = option.id
    this.getOrder()
  },
  onShow() {
    this.payed = false
  },

  methods: {
    handleReceiveDialog(id) {
      api.orders
        .receive(id)
        .then((res) => {
          if (res.code === 200) {
            this.show('收货成功')
            this.getOrder()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    receive(id) {
      this.$refs.receiveDialog.show(id)
    },
    getOrder() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.orders
        .show(this.order_id)
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            this.resultStatus = true
            this.orderData = res.data
            console.log(this.orderData)
            if (this.orderData.status === 1) {
              this.minute = parseInt(this.orderData.expired_second / 60)
              this.second = parseInt(this.orderData.expired_second % 60)
              let timer = setInterval(() => {
                this.second--
                if (!this.second) {
                  if (!this.minute) {
                    clearInterval(timer)
                    this.orderData.status = 5
                  } else {
                    this.second = 59
                    this.minute--
                  }
                }
                this.minute_str = this.minute < 10 ? '0' + this.minute : this.minute
                this.second_str = this.second < 10 ? '0' + this.second : this.second
              }, 1000)
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handleConfirm(id) {
      api.orders
        .cancel(id)
        .then((res) => {
          if (res.code === 200) {
            this.show('删除成功')
            this.getOrder()
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    cancel(id) {
      this.$refs.alertDialog.show(id)
      /* uni.showModal({
        title: '提示',
        content: `确定取消订单吗？`,
        success: (result) => {
          if (result.confirm) {
            
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      }) */
    },
    handelDelOrder(id) {
      api.orders
        .del(id)
        .then((res) => {
          if (res.code === 200) {
            this.show('删除成功')
            this.getOrder()
          } else {
            this.show('删除失败')
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    del(id) {
      this.$refs.delDialog.show(id)
    },
    pay(item) {
      api.orders
        .edit(item.id)
        .then((res) => {
          if (res.code === 200) {
            // 微信支付
            if (item.pay_type == 1) {
              let pay_data = res.data.data
              uni.requestPayment({
                provider: 'wxpay',
                orderInfo: {
                  appid: pay_data.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
                  noncestr: pay_data.noncestr, // 随机字符串
                  package: pay_data.package, // 固定值
                  partnerid: pay_data.partnerid, // 微信支付商户号
                  prepayid: pay_data.prepayid, // 统一下单订单号
                  timestamp: pay_data.timestamp, // 时间戳（单位：秒）
                  sign: pay_data.sign, // 签名，这里用的 MD5/RSA 签名
                },
                success: (res) => {
                  this.payed = false
                  this.refresh()
                },
                fail: (error) => {
                  this.payed = false
                  this.refresh()
                },
              })
            } else if (item.pay_type == 2) {
              let pay_data = res.data.data
              uni.requestPayment({
                provider: 'alipay',
                orderInfo: pay_data,
                success: (res) => {
                  this.payed = false
                  this.getOrder()
                },
                fail: (error) => {
                  this.payed = false
                  this.getOrder()
                },
              })
            }
          } else if (res.code === 400) {
            // 虎元素不足的情况，跳转充值页面
            // console.log('虎元素不足')
            // uni.navigateTo({ url: '/pages/user/recharge?amount=12' })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.order-detail-layout {
  min-height: 100vh;
  background-color: #141414;
}

.header {
  color: white;
  text-align: center;
  padding: 20rpx 0;

  .status {
    font-size: 40rpx;
    font-weight: bold;
  }

  .time {
    font-size: 26rpx;
    margin-top: 10rpx;

    .expired {
      font-weight: bold;
    }
  }
}

.content {
  height: 100%;
  min-height: 100vh;
  background-color: #141414;
  padding-bottom: 100rpx !important;
  position: relative;
  z-index: 2;

  /* #ifdef MP-WEIXIN */
  ::v-deep .my-content {
    overflow-y: scroll;
    padding-bottom: 100rpx !important;
    margin-right: 0 !important;
  }
  /* #endif */

  .content_bg {
    position: fixed;
    z-index: -5;
    left: 0;
    top: 0;
    width: 100%;
  }

  .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 250rpx;
    color: #fff;
    font-weight: bold;
    font-size: 46rpx;

    .status {
      display: flex;
      align-items: center;

      .time_icon {
        height: 40rpx;
        margin-right: 10rpx;
      }
    }

    .expired_at {
      display: flex;
      font-size: 24rpx;
      margin-top: 10rpx;
      display: flex;
      align-items: center;

      .time {
        font-size: 32rpx;
      }
    }
  }

  .address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #1f1f1f;
    margin: 0 30rpx 30rpx 30rpx;
    padding: 30rpx 0;
    border-radius: 5rpx;
    color: white;

    .address_icon {
      width: 88rpx;
      height: 88rpx;
      margin: 0 40rpx;
    }

    .address_info {
      flex: 1;
      display: flex;
      flex-direction: column;
      /* height: 80rpx; */
      justify-content: space-between;

      .address_user {
        display: flex;
        align-items: flex-end;

        .username {
          font-size: 32rpx;
          margin-right: 20rpx;
          font-weight: bold;
        }

        .mobile {
          font-size: 28rpx;
        }
      }

      .address_detail {
        font-size: 26rpx;
        color: #808080;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //2行
        -webkit-box-orient: vertical;
      }
    }
  }

  .goods_box {
    display: flex;
    flex-direction: column;

    border-radius: 5rpx;
    padding-bottom: 10rpx;
    margin: 0 30rpx;
    color: #808080;

    .goods_header {
      height: 80rpx;
      line-height: 80rpx;
      font-weight: bold;
      /* margin-left: 30rpx; */
      font-size: 32rpx;
      display: flex;
      align-items: center;
      color: white;

      .goods_header_dot {
        width: 10rpx;
        height: 30rpx;
        margin-right: 5rpx;
        background-color: #a361f6;
        color: #a361f6;
        border-radius: 4rpx;
      }
    }

    .order_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #1f1f1f;

      .order_label {
        margin-left: 30rpx;
        font-size: 28rpx;
        font-weight: bold;
      }

      .order_text {
        margin-right: 30rpx;
        font-size: 28rpx;
        display: flex;
        align-items: baseline;
        color: white;

        .price_dot,
        .price_float,
        .price_icon {
          font-size: 24rpx;
        }
      }

      &.remark {
        flex-direction: column;
        align-items: flex-start;
        height: 140rpx;
        justify-content: center;
      }

      .order_remark {
        margin-left: 30rpx;
        margin-top: 30rpx;
        color: #999;
      }
    }

    .goods_content {
      display: flex;
      flex-direction: column;
      max-height: 440rpx;
      overflow: scroll;
      background-color: #1f1f1f;

      .goods_info {
        display: flex;
        padding: 10rpx 30rpx 10rpx 0;

        .goods-image-bg {
          width: 200rpx;
          height: 200rpx;
          background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-goods-image-normal.png');
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 20rpx 30rpx;

          .goods_image {
            width: 170rpx;
            height: 170rpx;
            /* border: 1rpx solid #f7f7f7; */
          }
        }

        .goods_item {
          flex: 1;
          display: flex;
          justify-content: space-around;
          flex-direction: column;
          color: white;

          .goods_name {
            width: 100%;
            font-size: 26rpx;
            -webkit-line-clamp: 3;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .goods_attr {
            .goods_attr_value {
              font-size: 24rpx;
              background-color: rgba(255, 255, 255, 0.2);
              padding: 5rpx 10rpx;
              color: white;
            }
          }

          .goods_price_num {
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: baseline;

            .goods_price {
              display: flex;
              align-items: baseline;
              font-size: 28rpx;

              .goods_price_dot,
              .goods_price_float,
              .goods_price_icon {
                font-size: 24rpx;
              }
            }

            .goods_num {
              color: #999;
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }

  .order_box {
    display: flex;
    flex-direction: column;
    margin: 30rpx 30rpx 60rpx 30rpx;
    border-radius: 5rpx;
    padding-bottom: 10rpx;
    color: #808080;

    .order_header {
      height: 80rpx;
      line-height: 80rpx;
      font-weight: bold;
      /* margin-left: 30rpx; */
      margin-right: 30rpx;
      display: flex;
      align-items: center;
      font-size: 32rpx;
      /* margin-bottom: 20rpx; */
      color: white;

      .order_header_dot {
        width: 10rpx;
        height: 30rpx;
        margin-right: 10rpx;
        background-color: #a361f6;
        color: #a361f6;
        border-radius: 4rpx;
      }
    }

    .order_item {
      background-color: #1f1f1f;

      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;

      .order_label {
        margin-left: 30rpx;
        font-weight: bold;
      }

      .order_text {
        margin-right: 30rpx;
        color: white;
        font-size: 26rpx;
      }
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0rpx;
    left: 0;
    width: 100%;
    height: 120rpx;
    background-color: #141414;
    align-items: center;
    color: white;
    box-sizing: border-box;
    padding: 0 40rpx;

    .bottom_text {
      display: flex;
      align-items: baseline;
      flex-direction: column;
      margin-right: 10rpx;
      font-size: 24rpx;

      .bottom_text_num {
        margin-right: 10rpx;
        color: white;
      }

      .bottom_text_amount {
        font-weight: bold;
        display: flex;
        align-items: baseline;
        font-size: 24rpx;

        .amount_icon {
          color: white;
        }

        .amount_int {
          color: #ded000;

          font-size: 36rpx;
          font-weight: bold;
        }
      }
    }

    .exchange_btn {
      width: 228rpx;
      height: 84rpx;
      line-height: 84rpx;
      font-size: 31rpx;
      font-weight: bold;
      margin-right: 10rpx;
      text-align: center;
      color: #fff;
      background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary-small2.png');
      background-size: 100% 100%;

      &.cancel {
        filter: grayscale(1);
      }

      &.pay {
      }

      &.receive {
      }
    }
  }
}
</style>
